<template>
<div>
  <ul>
  	<li>msg:{{state.msg}}</li>
  	<li>person:{{state.person}}</li>
  	<li>courses:{{state.courses}}</li>
  </ul>
  <button @click="updateMsg">更新msg</button>
  <button @click="updatePerson">更新person</button>
  <button @click="updateCourses">更新courses</button>
</div>
</template>
<script setup>
import {reactive} from "vue"
const state=reactive({
	msg:"Hello Atguigu",
	person:{
		name:"Tom",
		age:22,
	},
	courses:["JavaScript","BOM","DOM"],
})
const updateMsg=()=>{
	state.msg+="--"
}
const updatePerson=()=>{
	state.person={
		name:"Jack",
		age:33,
	}
}
const updateCourses=()=>{
	state.courses=["JavaScript2","BOM2","DOM2"]
}
</script>